<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM2 创建事件</title>
</head>
<body>
	<h1>DOM2 创建事件</h1><hr>
	<form id="mouseform" name="mouseform" action="#" method="get">
		在浏览器中点击的位置:
		<input id="clientx" type="text" size="5">-<input id="clienty" type="text" size="5"><br>
	</form><br><hr><br>
	<script type="text/javascript">
		function showMouseDetails(event) {
			document.mouseform.clientx.value = event.clientX;
			document.mouseform.clienty.value = event.clientY;
		}
		function makeEvent() {
			evt = document.createEvent("HTMLEvents");
			evt.initEvent("click", "true", "true");
			currentNode.dispatchEvent(evt);
		}
		function startListen() {
			document.addEventListener("click", showMouseDetails, true);
		}
		function stopListen() {
			document.removeEventListener("click", showMouseDetails, true);
		}
		startListen();
	</script>
	<form action="#" method="get" id="myForm" name="myForm">
		当前节点:<input type="text" name="statusField" value=""><br><br>
		<input type="button" value="双亲节点" onclick="if(currentNode.parentNode) currentNode = currentNode.parentNode;
		document.myForm.statusField.value = currentNode.nodeName;">
		<input type="button" value="第一个子节点" onclick="if(currentNode.firstChild) currentNode = currentNode.firstChild;
		document.myForm.statusField.value = currentNode.nodeName;">
		<input type="button" value="后一兄弟节点" onclick="if(currentNode.nextSibling) currentNode = currentNode.nextSibling;
		document.myForm.statusField.value = currentNode.nodeName;">	
		<input type="button" value="前一兄弟节点" onclick="if(currentNode.previousSibling) currentNode = currentNode.previousSibling;
		document.myForm.statusField.value = currentNode.nodeName;">
		<br><br>
		<input type="button" value="开始监控事件" onclick="startListen();">
		<input type="button" value="停止监控事件" onclick="stopListen();">
		<br><br>
		<input type="button" value="创建事件" onclick="makeEvent();">
	</form>
	<script type="text/javascript">
		var currentNode = document.body;
		document.myForm.statusField.value = currentNode.nodeName;
	</script>
</body>
</html>